import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, InputNumber,Select,Row,Col,Button,Table,message,Popconfirm } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import { queryUesrRule } from '../service';

const FormItem = Form.Item;

import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 初始化 props
// 初始化 提交表单字段
interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  common: any;
  onSubmit: (fieldsValue: {
    login_name: string,
    password: string,
    remark: string,
    rank_num: number,
  }) => void;
  onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = props => {
  const { modalVisible, form, onSubmit: handleAdd, onCancel,common } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      console.log(fieldsValue);
      handleAdd(fieldsValue);
    });
  };

  const [dataList, setDataList] = useState<any[]>([])

  const columns = [
    {
      title: '用户ID',
      dataIndex: 'id',
    },
    {
      title: '手机',
      dataIndex: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record:any) => (
        <>
         <Popconfirm
            title="确认删除吗？"
            onConfirm={()=>{handleAdd({id: record.id});}}
            okText="确认"
            cancelText="取消"
          >
            <a>
            添加
            </a>
          </Popconfirm>
          
        </>
      ),
    },
  ];

  const searchUser = () => {
    form.validateFields((err, fieldsValue) => {
      // if (err) return;
      // form.resetFields();
      console.log(fieldsValue);
      queryUesrRule({keyword: fieldsValue.words}).then(res=>{
        if(res.code == 0){
          console.log(res.data.list);
          setDataList(res.data.list);
        }else{
          message.error(res.msg);
        }
      })
    });
  }

  return (
    <Modal
      destroyOnClose
      title="新建管理员"
      width={"50%"}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
      footer={false}
    >
      <Row>
        <Col span={18}>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'选择用户'}>
            {form.getFieldDecorator('words', {
             // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
            })(<Input placeholder="请输入手机号/邮箱 搜索"/>)}
          </FormItem>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={()=>{searchUser()}}>搜索</Button>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table 
            columns={columns}
            dataSource={dataList}
          />
        </Col>
      </Row>
    </Modal>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
